<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-information-container`]">
      <view class="row-list">
        <view class="item-left">头像</view>
        <view class="item-right">
          <image class="avatar" :src="userInfo.headimgurl || $CDN('/common/static/images/avatar.png')"></image>
        </view>
      </view>
      <view class="row-list">
        <view class="item-left">昵称</view>
        <view class="item-right black">{{ userInfo.nickname }}</view>
      </view>
      <view class="row-list bottom-border" @click="handleEmail">
        <view class="item-left">电子邮箱</view>
        <view class="item-right" v-if="!userInfo.e_mail">未填写<uv-icon class="icon-right" size="12" name="arrow-right"></uv-icon></view>
        <view class="item-right" v-else>{{ userInfo.e_mail }}<uv-icon class="icon-right" size="12" name="arrow-right"></uv-icon></view>
      </view>
      <view class="row-list">
        <view class="item-left">实名认证</view>
        <view class="item-right">
          <view v-if="userInfo.is_identity_auth === 0" class="tag" @click="handleJump('/pages/user/ocr-auth')">未认证</view>
          <view v-if="userInfo.is_identity_auth === 1" class="tag active" @click="handleJump('/pages/user/user-info')">已认证</view>
          <uv-icon class="icon-right" size="12" name="arrow-right"></uv-icon>
        </view>
      </view>
      <view class="row-list">
        <view class="item-left">企业员工认证</view>
        <view class="item-right">{{ verificationCompanyLabel }}<uv-icon class="icon-right" size="12" name="arrow-right"></uv-icon></view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'information',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {}
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['isLogin', 'userInfo']),

    verificationCompanyLabel() {
      let value = '未认证'
      switch (this.userInfo.is_verification_company) {
        case 0:
          value = '未认证'
          break
        case 1:
          value = this.userInfo.company_info.enterprise_name
          break
        case 2:
          value = '已过期'
          break
      }
      return value
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    this.GetUserInfo()
    console.log('12123', this.userInfo)
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('user', ['GetUserInfo']),
    handleEmail() {
      this.$ROUTE.go('/pages/user/email')
    },
    handleJump(path) {
      this.$ROUTE.go(path)
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('information-container')} {
  position: relative;
  background: white;
  .row-list {
    display: flex;
    align-items: center;
    margin: 0 12px;
    padding: 18px 0;
    .item-left {
      color: #666;
    }
    .item-right {
      margin-left: auto;
      font-size: 12px;
      display: flex;
      align-items: center;
      color: #666;
      .icon-right {
        margin-left: 10rpx;
      }
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #f5f5f5;
      }
      .tag {
        border: 1px solid #f5f5f5;
        border-radius: 4px;
        padding: 2px 4px;
        font-size: 12px;
      }
      .active {
        color: $uv-primary;
        border-color: $uv-primary;
      }
    }
    .black {
      color: black;
    }
  }
  .bottom-border {
    border-bottom: 1px solid #f5f5f5;
  }
}
</style>
